<!DOCTYPE html>
<html>
<head>
	<title>nth-graph jQuery plugin test</title>
	<script src="../lib/jquery.js" type="text/javascript"></script>
	<script src="../lib/jquery.nth-graph.js" type="text/javascript"></script>
	<script src="../lib/svg.js" data-path="../lib/"></script>
	<script src="../lib/jquery.nth-graph-view.js" type="text/javascript"></script>
	<script type="text/javascript">
	// <![CDATA[	
	var graph_data = {
		"basic_graph":{"graph":{"version":"0.03"}  
				, "nodes":[	
							  {"name":"start"}
							, {"ele":"#out", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}
								, "process":"function(){data.out = this.msg+'!';}"
								}
							, {"name":"msg", "data":{"msg":"Hello World"}, "type":"in"}
							, {"name":"end"}
				  ]
				, "edges":[
							  {"from":0, "to":1, "type":"trans"}
							, {"from":1, "to":2, "type":"get", "name":"msg"}
							, {"from":1, "to":3, "type":"trans"}
							, {"from":1, "to":1, "type":"set", "name":"out"}
				  ]
			},
		"basic_view":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"cx":60, "cy":40, "view-type":"circle"}
							, {"cx":180, "cy":40, "view-type":"circle", "label":"'process = '+ \~.process;"}
							, {"cx":110, "cy":110, "view-type":"circle", "label":"'msg = '+ \~.data.msg;"}
							, {"cx":300, "cy":40, "view-type":"circle"}
				  ]
				, "edges":[
							  {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":120}, "head":{"angle":290}}
							, {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":70}, "head":{"angle":40}}
				  ]
			}
	};

	$(document).ready(function() {
		$("body").nthGraph({"cg":graph_data.basic_graph});
		$("#diagram").nthGraphView({ "g":graph_data.basic_graph
														   , "gv":graph_data.basic_view
															 , "ui":{}, "debug":function(msg){alert(msg);}
															 });
	});

	
	// ]]>
	</script>
</head>
<body>
	<p id="out">the place for output</p>
	<div>
	  <script type="image/svg+xml">
	    <svg width="400" height="200"
	         style="background-color: #FFF3E1; display: block; margin-bottom: 5px;">
	      <g id="diagram" 
	         fill="blue" 
	         style="font-size: 18px; text-anchor: middle; font-family: serif;">
	        <text x="100" y="155">nth-graph</text>
	        <text x="100" y="175">Simple Math Diagram 1</text>
	      </g>
	    </svg>
	  </script>
	</div>
</body>
</html>